<template>
    <div class="testing-index yuan-container">
        <a-card title="检测机构">
            <div class="filter-panel" style="overflow-hidden">
                <a-input-search class="filter-list" allowClear style="width: 200px;color: #05b089" v-model="keywords"
                    placeholder="请输入关键字" @search="resetList" />
                <div class="filter-list" style="float: right;" v-if="$utilCheckPermission(['testingOrganizationAdd'])">
                    <a-button type="primary" @click="add">新增</a-button>
                </div>
            </div>
            <div class="table">
                <a-table bordered :rowKey="getRowKey" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">
                </a-table>
            </div>
        </a-card>
        <a-modal width="600px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal testing-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col3">
                            <a-form-model-item class="yuan-form-item" label="检测机构" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="检测负责人" prop="principal">
                                <a-input class="yuan-form-input" v-model="formData.principal" placeholder="请输入"></a-input>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { TestingListRes } from "@/api/nextApi";
@Component({
    name: "testingIndex",
    components: {},
})
export default class extends Vue {
    previewVisible = false;
    imageUrls = ["/img/test.jpg", "/img/test1.png", "../../../assets/images/logo.png"];
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: TestingListRes[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: TestingListRes, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "检测机构",
        },
        {
            align: "center",
            dataIndex: "principal",
            key: "principal",
            title: "检测负责人",
        },
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "添加时间",
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: string, record: TestingListRes, index: number) => {
                const stateBox = h(
                    "div",
                    { class: record.state === 0 ? "c-success" : "c-danger" },
                    record.state === 0 ? "启用" : "禁用"
                );
                return stateBox;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            customRender: (text: string, record: TestingListRes, index: number) => {
                const statusDom = h(
                    "a-popconfirm",
                    {
                        props: {
                            title: record.state === 0 ? "确定要禁用吗？" : "确定要启用吗？",
                            okText: "确定",
                            cancelText: "取消",
                        },
                        on: { confirm: () => this.clickDisable(record) },
                    },
                    [
                        h(
                            "a-button",
                            {
                                props: {
                                    icon: "tool",
                                    type: record.state === 0 ? "danger" : "primary",
                                    size: "small",
                                },
                            },
                            record.state === 0 ? "禁用" : "启用"
                        ),
                    ]
                );
                const editBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "edit", type: "primary", size: "small" },
                        on: { click: () => this.editDetail(record) },
                    },
                    "编辑"
                );

                const btn: any[] = [];
                if (this.$utilCheckPermission(["testingOrganizationCompile"])) btn.push(editBtn);
                if (this.$utilCheckPermission(["testingOrganizationForbidden"])) btn.push(statusDom);
                return h("div", btn);
            },
        },
    ];
    formLoading = false;
    modalOption = {
        title: "新增许可证",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    formData: any = {};
    rules = {
        name: [{ required: true, message: "请输入检测机构", trigger: "blur" }],
        principal: [{ required: true, message: "请输入检测负责人", trigger: "blur" }],
    };
    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getTestingList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                name: this.keywords,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    visible = false;
    editDetail(item: TestingListRes) {
        this.formData = { ...item };
        this.visible = true;
    }
    add() {
        this.formData = {};
        this.visible = true;
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    mounted() {
        this.getList();
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.formLoading = true;
                try {
                    delete this.formData.createTime;
                    const res = await nextApi.editTesting(this.formData);
                    this.$message.success(res.msg);
                    this.formData = {};
                    (this.$refs.form as any).resetFields();
                    this.visible = false;
                    this.getList();
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    closeModal() {
        this.visible = false;
    }
    async clickDisable(item: TestingListRes) {
        try {
            this.loading = true;
            await nextApi.editTesting({
                id: item.id,
                state: item.state === 0 ? 1 : 0,
            });
        } finally {
            this.loading = false;
        }
        this.getList();
    }
}
</script>
<style lang="scss">
.testing-index {
    padding: 20px;
}
</style>
